<div ng-if="!$ctrl.canDrag">
  <small
    class="text-info"
    ng-bind="$ctrl.translate('warning_can_not_drag_drop',true, 'Note: Drag & Drop feature only active when priority is asc')"
  ></small>
</div>

<div class="data-table" ng-if="$ctrl.data.items" ng-init="$ctrl.init()">
  <div class="container-fluid">
    <div class="row header border-top">
      <div class="col-1">
        <!-- <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small> -->
      </div>
      <div scope="col" class="col-sm-1">
        <i class="fas fa-sort-numeric-down"></i>
      </div>
      <div
        scope="col"
        class="col-sm-{{$ctrl.colWidth}}"
        ng-repeat="col in $ctrl.columns track by $index"
      >
        <span ng-bind="col.title"> </span>
      </div>
      <div scope="col" class="col-sm-2"></div>
    </div>
  </div>
  <div
    dnd-list="$ctrl.data.items"
    id="list-page"
    class="nav"
    ng-if="$ctrl.data.items.length"
    dnd-inserted="$ctrl.insertCallback(index, item, external, type)"
    dnd-disable-if="!$ctrl.canDrag"
  >
    <div class="col-sm-12 dndPlaceholder"></div>
    <div
      ng-repeat="nav in $ctrl.data.items"
      class="container-fluid dnd-item rounded-0 border-left-0 border-right-0 border-bottom-0"
      dnd-draggable="nav"
      dnd-moved="$ctrl.updateOrders($index,$ctrl.data.items)"
      dnd-effect-allowed="move"
      dnd-selected="$ctrl.selected = nav"
      ng-class="{'selected': $ctrl.selected === nav}"
    >
      <div class="row">
        <div class="col-1 drag-header small" style="cursor: grab">
          <small
            class="fa fa-grip-vertical fa-xs text-black-50 align-middle small"
          ></small>
        </div>
        <div class="col-sm-1">
          <!-- <input style="width:40px" type="number" readonly="readonly" ng-model="nav.priority"
                        class="item-priority form-control form-control-sm d-inline"> -->
          <small class="small">{{nav.priority}}</small>
        </div>
        <div
          class="col-sm-{{$ctrl.colWidth}}"
          ng-repeat="col in $ctrl.columns track by $index"
        >
          <small>
            <mix-data-preview
              type="col.type"
              value="nav[col.name]"
              width="50"
              class="align-middle"
            >
            </mix-data-preview>
          </small>
        </div>
        <div class="col-sm-{{$ctrl.lastColWidth}}">
          <div
            class="btn-group btn-group-sm float-end"
            role="group"
            aria-label="Actions"
          >
            <a
              ng-if="nav.childNavs.length > 0"
              class="btn btn-dark text-primary"
              ng-click="$ctrl.toggleChildNavs(nav)"
            >
              <span class="fa fa-list"></span>
            </a>
            <a
              ng-if="$ctrl.editUrl"
              ng-click="$ctrl.goTo(nav.id)"
              class="btn btn-sm text-primary"
            >
              <span class="fas fa-pen"></span>
            </a>
            <a
              ng-click="$ctrl.delete(nav.id);"
              class="btn btn-sm del-popover text-danger"
              data-bs-toggle="popover"
              data-html="true"
            >
              <span class="fas fa-trash-alt"></span>
            </a>
          </div>
        </div>
      </div>
      <!-- Childs -->
      <div
        ng-show="nav.showChildNavs"
        dnd-list="nav.childNavs"
        class="nav"
        dnd-disable-if="!$ctrl.canDrag"
      >
        <div class="col-sm-12 dndPlaceholder"></div>
        <div
          ng-repeat="snav in nav.childNavs"
          class="col-sm-12 dnd-item"
          dnd-draggable="snav"
          dnd-moved="$ctrl.updateChildOrders($index,nav.childNavs)"
          dnd-effect-allowed="move"
          dnd-selected="$ctrl.selected = snav"
        >
          <div class="row">
            <div class="col-1 drag-header" style="cursor: grab">
              <small
                class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
              ></small>
            </div>
            <div class="col-sm-1">
              <input
                type="number"
                readonly="readonly"
                ng-model="snav.priority"
                class="item-priority form-control form-control-sm d-inline"
              />
            </div>
            <div
              class="col-sm-{{$ctrl.colWidth}}"
              ng-repeat="col in $ctrl.columns"
            >
              <mix-data-preview
                type="col.type"
                value="snav.page[col.name]"
                width="50"
              >
              </mix-data-preview>
            </div>
            <div class="col-sm-{{$ctrl.lastColWidth}}">
              <div
                class="btn-group btn-group-sm float-end"
                role="group"
                aria-label="Actions"
              >
                <a
                  ng-if="$ctrl.editUrl"
                  ng-click="$ctrl.goTo(snav.page.id)"
                  class="btn btn-sm btn-dark text-primary"
                >
                  <span class="fas fa-pen"></span>
                </a>
                <a
                  ng-click="$ctrl.delete(snav.id);"
                  class="btn btn-dark del-popover text-danger"
                  data-bs-toggle="popover"
                  data-html="true"
                >
                  <span class="fas fa-trash-alt"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Childs -->
    </div>
  </div>
</div>
<!-- <div class="card">
    <div class="card-body">
    </div>
</div> -->
